<template>
    <div>
        <Card style="width:100%;">
            <div slot="title">{{$t('goman.req.report.title')}}</div>
            <div>
                <Row style="height:240px;">
                    <Col span="8">
                        <div>{{$t('goman.req.report.summary.total')}}：{{total}}&nbsp;s</div>
                        <div>{{$t('goman.req.report.summary.slowest')}}：{{slowestFinish}}&nbsp;ms</div>
                        <div>{{$t('goman.req.report.summary.fastest')}}：{{fastestFinish}}&nbsp;ms</div>
                        <div>{{$t('goman.req.report.summary.average')}}：{{avgFinish}}&nbsp;ms</div>
                        <div>{{$t('goman.req.report.summary.rps')}}：{{rps}}</div>
                    </Col>
                    <Col span="16">
                        <div>
                            <Table stripe border size="small" :columns="durationColumns" :data="durations" :no-data-text="$t('goman.general.noData')" :no-filtered-data-text="$t('goman.general.noFilterData')"></Table>
                        </div>
                    </Col>
                    <!-- <Col span="10">
                        <div :id="chartID" style="height:240px;"></div>
                    </Col> -->
                </Row>
            </div>
        </Card>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import echarts from "echarts";
import moment from "moment";

@Component
export default class report extends Vue {
  @Prop() start: number;
  @Prop() resList: Req.ResponseModel[];
  @Prop() tabID: string;

  durationColumns = <any[]>[
    {
      title: "",
      key: "type"
    },
    {
      title: "",
      key: "average"
    },
    {
      title: "",
      key: "slowest"
    },
    {
      title: "",
      key: "fastest"
    }
  ];
  durations: any[] = [];

  ec: echarts.ECharts;
  ecOption: echarts.EChartOption;

  total = 0;
  rps = 0;
  avgDNS = 0;
  avgConn = 0;
  avgReq = 0;
  avgDelay = 0;
  avgRes = 0;
  avgFinish = 0;

  fastestDNS = 0;
  fastestConn = 0;
  fastestReq = 0;
  fastestDelay = 0;
  fastestRes = 0;
  fastestFinish = 0;

  slowestDNS = 0;
  slowestConn = 0;
  slowestReq = 0;
  slowestDelay = 0;
  slowestRes = 0;
  slowestFinish = 0;

  created() {
    this.onLocale();
  }

  @Watch("$i18n.locale")
  onLocale() {
    this.durationColumns[0].title = this.$t(
      "goman.req.report.table.type"
    ).toString();
    this.durationColumns[1].title =
      this.$t("goman.req.report.table.average").toString() + "(ms)";
    this.durationColumns[2].title =
      this.$t("goman.req.report.table.slowest").toString() + "(ms)";
    this.durationColumns[3].title =
      this.$t("goman.req.report.table.fastest").toString() + "(ms)";

    this.onDurationShow();
    // this.onCharts();
  }

  mounted() {
    // this.ec = echarts.init(<HTMLDivElement>document.getElementById(
    //   this.chartID
    // ));
  }

  get chartID() {
    return "mychart" + this.tabID;
  }

  @Watch("resList")
  onResListChange() {
    this.onCount();

    this.onDurationShow();
    // this.onCharts();
  }

  onDurationShow() {
    this.durations = [
      {
        type: this.$t("goman.req.report.table.dns"),
        fastest: this.fastestDNS,
        slowest: this.slowestDNS,
        average: this.avgDNS
      },
      {
        type: this.$t("goman.req.report.table.conn"),
        fastest: this.fastestConn,
        slowest: this.slowestConn,
        average: this.avgConn
      },
      {
        type: this.$t("goman.req.report.table.req"),
        fastest: this.fastestReq,
        slowest: this.slowestReq,
        average: this.avgReq
      },
      {
        type: this.$t("goman.req.report.table.delay"),
        fastest: this.fastestDelay,
        slowest: this.slowestDelay,
        average: this.avgDelay
      },
      {
        type: this.$t("goman.req.report.table.res"),
        fastest: this.fastestRes,
        slowest: this.slowestRes,
        average: this.avgRes
      }
    ];
  }

  onCount() {
    if (this.resList.length == 0) {
      return;
    }

    //总耗时，单位：秒
    this.total = this.roundNumber((moment().valueOf() - this.start) / 1000);

    // req/sec 每秒请求籹
    this.rps = this.roundNumber(this.resList.length / this.total);

    let resCount = 0;

    this.avgDNS = 0;
    this.avgConn = 0;
    this.avgReq = 0;
    this.avgDelay = 0;
    this.avgRes = 0;
    this.avgFinish = 0;

    this.fastestDNS = 0;
    this.fastestConn = 0;
    this.fastestReq = 0;
    this.fastestDelay = 0;
    this.fastestRes = 0;
    this.fastestFinish = 0;

    this.slowestDNS = 0;
    this.slowestConn = 0;
    this.slowestReq = 0;
    this.slowestDelay = 0;
    this.slowestRes = 0;
    this.slowestFinish = 0;

    for (let res of this.resList) {
      if (!res.error) {
        resCount++;
      }

      let dnsDuration = this.formatDuration(res.duration.dns),
        connDuration = this.formatDuration(res.duration.conn),
        reqDuration = this.formatDuration(res.duration.req),
        delayDuration = this.formatDuration(res.duration.delay),
        resDuration = this.formatDuration(res.duration.res),
        finishDuration = this.formatDuration(res.duration.finish);

      if (dnsDuration < this.fastestDNS) {
        this.fastestDNS = dnsDuration;
      }
      if (dnsDuration > this.slowestDNS) {
        this.slowestDNS = dnsDuration;
      }

      if (connDuration < this.fastestConn) {
        this.fastestConn = connDuration;
      }
      if (connDuration > this.slowestConn) {
        this.slowestConn = connDuration;
      }

      if (reqDuration < this.fastestReq) {
        this.fastestReq = reqDuration;
      }
      if (reqDuration > this.slowestReq) {
        this.slowestReq = reqDuration;
      }

      if (delayDuration < this.fastestDelay) {
        this.fastestDelay = delayDuration;
      }
      if (delayDuration > this.slowestReq) {
        this.slowestReq = delayDuration;
      }

      if (resDuration < this.fastestRes) {
        this.fastestRes = resDuration;
      }
      if (resDuration > this.slowestRes) {
        this.slowestRes = resDuration;
      }

      if (finishDuration < this.fastestFinish) {
        this.fastestFinish = finishDuration;
      }
      if (finishDuration > this.slowestFinish) {
        this.slowestFinish = finishDuration;
      }

      this.avgDNS += dnsDuration;
      this.avgConn += connDuration;
      this.avgReq += reqDuration;
      this.avgDelay += delayDuration;
      this.avgRes += resDuration;
      this.avgFinish += finishDuration;
    }

    this.avgDNS = this.roundNumber(this.avgDNS / resCount);
    this.avgConn = this.roundNumber(this.avgConn / resCount);
    this.avgReq = this.roundNumber(this.avgReq / resCount);
    this.avgDelay = this.roundNumber(this.avgDelay / resCount);
    this.avgRes = this.roundNumber(this.avgRes / resCount);
    this.avgFinish = this.roundNumber(this.avgFinish / resCount);
  }

  roundNumber(n: number, f?: number): number {
    if (!f || f < 0) {
      f = 2;
    }

    f = f * 10;
    return Math.round(n * f) / f;
  }

  formatDuration(str: string): number {
    let x = 1;

    if (str.indexOf("ns") != -1) {
      str = str.replace("ns", "");
      x = 1000000;
    } else if (str.indexOf("µs") != -1) {
      str = str.replace("µs", "");
      x = 1000;
    } else if (str.indexOf("ms") != -1) {
      str = str.replace("ms", "");
    } else if (str.indexOf("s") != -1) {
      str = str.replace("s", "");
      x = 0.001;
    }

    return parseFloat(str) / x;
  }

  onCharts() {
    if (this.resList.length == 0) {
      return;
    }

    this.ecOption = {
      title: {
        text: this.$t("goman.req.report.chart.title").toString() + "(ms)"
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: "vertical",
        left: "left",
        data: [
          this.$t("goman.req.report.table.dns").toString(),
          this.$t("goman.req.report.table.conn").toString(),
          this.$t("goman.req.report.table.req").toString(),
          this.$t("goman.req.report.table.delay").toString(),
          this.$t("goman.req.report.table.res").toString()
        ]
      },
      series: [
        {
          name: this.$t("goman.req.report.chart.serieName").toString(),
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          selectedMode: "single",
          data: [
            {
              value: this.avgDNS,
              name: this.$t("goman.req.report.table.dns").toString()
            },
            {
              value: this.avgConn,
              name: this.$t("goman.req.report.table.conn").toString()
            },
            {
              value: this.avgReq,
              name: this.$t("goman.req.report.table.req").toString()
            },
            {
              value: this.avgDelay,
              name: this.$t("goman.req.report.table.delay").toString()
            },
            {
              value: this.avgRes,
              name: this.$t("goman.req.report.table.res").toString()
            }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    };

    let opt = <any>this.ecOption;
    opt.title.x = "center";
    this.ec.setOption(opt);
    this.ec.resize();
  }

  getDurations(key: string): number[] {
    let data: number[] = [];

    for (var res of this.resList) {
      data.push(parseInt(res.duration[key]));
    }

    return data;
  }
}
</script>
